{% extends 'base.html' %}

{% block title %}联系我们 | 康普惠{% endblock %}

{% block content %}
{% load static %}
<!-- 页面标题 -->
<section class="page-header bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h1 class="display-4">联系我们</h1>
                <p class="lead">无论您有任何问题，都可以通过以下方式联系我们的专业团队</p>
            </div>
        </div>
    </div>
</section>

<section class="contact-section py-5">
    <div class="container">
        <!-- 消息提示 -->
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show mb-4" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
        
        <div class="row">
            <!-- 联系表单 -->
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <h2 class="h4 mb-4">发送信息</h2>
                        <form method="post">
                            {% csrf_token %}
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="{{ form.name.id_for_label }}" class="form-label">姓名</label>
                                        {{ form.name }}
                                        {% if form.name.errors %}
                                            <div class="invalid-feedback d-block">
                                                {{ form.name.errors }}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="{{ form.email.id_for_label }}" class="form-label">电子邮箱</label>
                                        {{ form.email }}
                                        {% if form.email.errors %}
                                            <div class="invalid-feedback d-block">
                                                {{ form.email.errors }}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="{{ form.phone.id_for_label }}" class="form-label">电话</label>
                                        {{ form.phone }}
                                        {% if form.phone.errors %}
                                            <div class="invalid-feedback d-block">
                                                {{ form.phone.errors }}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="{{ form.company.id_for_label }}" class="form-label">公司</label>
                                        {{ form.company }}
                                        {% if form.company.errors %}
                                            <div class="invalid-feedback d-block">
                                                {{ form.company.errors }}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="{{ form.position.id_for_label }}" class="form-label">职位</label>
                                        {{ form.position }}
                                        {% if form.position.errors %}
                                            <div class="invalid-feedback d-block">
                                                {{ form.position.errors }}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="{{ form.message.id_for_label }}" class="form-label">您的留言</label>
                                        {{ form.message }}
                                        {% if form.message.errors %}
                                            <div class="invalid-feedback d-block">
                                                {{ form.message.errors }}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">提交信息</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 联系信息 -->
            <div class="col-lg-6">
                <div class="mb-4">
                    <h2 class="h4 mb-3">联系方式</h2>
                    <p>如果您有任何疑问或需要了解更多信息，请通过以下方式联系我们：</p>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="bi bi-telephone me-2 text-primary"></i> +86 13917367389</li>
                        <li class="mb-2"><i class="bi bi-globe me-2 text-primary"></i> www.cpwisdom.com</li>
                    </ul>
                </div>
                
                <div class="mb-4">
                    <h2 class="h4 mb-3">办公地点</h2>
                    <div class="row">
                        {% for office in offices %}
                            <div class="col-md-6 mb-3">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ office.name }}</h5>
                                        <p class="card-text small">{{ office.address }}</p>
                                        <p class="card-text small mb-0"><i class="bi bi-telephone me-1 text-primary"></i> {{ office.phone }}</p>
                                        <p class="card-text small"><i class="bi bi-envelope me-1 text-primary"></i> {{ office.email }}</p>
                                    </div>
                                </div>
                            </div>
                        {% empty %}
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">上海总部</h5>
                                        <p class="card-text small">上海松江区茸梅路1177弄8号楼302室</p>
                                        <p class="card-text small mb-0"><i class="bi bi-telephone me-1 text-primary"></i> +86 13917367389</p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                
                <div>
                    <h2 class="h4 mb-3">工作时间</h2>
                    <ul class="list-unstyled">
                        <li class="mb-2">周一至周五: 9:00 - 18:00</li>
                        <li>周六、周日: 休息</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %} 